<template>
	<view>
		<view class="footer-list" v-if="list.length">
			<view class="footer-item" @click="getDetails(item.id, item.cid)" v-for="item in list" :key="item.id">
				<view class="item-img"><image :src="item.img" mode=""></image></view>
				<view class="item-content">
					<view class="item-a">{{ item.h1 }}</view>
					<view class="item-b van-multi-ellipsis--l3">{{ item.category }}</view>
					<view class="item-c">
						<view class="left">
							<text>{{ item.jg }}</text>
							起起
						</view>
						<view class="right">好评率95%</view>
					</view>
				</view>
			</view>
		</view>
		<view class="search-null" v-else>
			<image style="width: 400rpx; height: 400rpx; margin-left: 170rpx;" src="https://static.daojia.com/assets/project/wx-index-v2/images/noresult.png" mode=""></image>
			<view style="text-align: center;">
				暂无服务
			</view>
		</view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app';
import { reqGetDate } from '@/api/modules/home.js'
import { reactive, toRefs } from 'vue'

const state = reactive({
	cid: '',
	list: []
})

// 初始化
const init = async () => {
	const { data } = await reqGetDate(state.cid)
	state.list = data.data.list
	console.log(data.data.list);
}

// 页面加载
onLoad((message) => {
	state.cid = message.id
	init()
	uni.setNavigationBarTitle({title: message.title})
})
// 详情
const getDetails = (id, cid) => {
	uni.navigateTo({
		url: `/subpkg/details/details?id=${id}&cid=${cid}`
	})
}
// 页面显示
onShow(() => {
	
})

// 页面隐藏
onHide(() => {
	
})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {
	
})
const { list } = toRefs(state)
</script>

<style lang="scss">
	page{
		padding: 0;
		background-color: #f5f5f5;
	}
.footer-list {
			.footer-item {
				margin-bottom: 20rpx;
				display: flex;
				padding: 10rpx 20rpx;
				background-color: #fff;
				.item-img {
					image {
						width: 300rpx;
						height: 200rpx;
						border-radius: 10rpx;
					}
				}
				.item-content {
					flex: 1;
					margin-left: 30rpx;
					.item-a {
						font-size: 30rpx;
					}
					.item-b {
						font-size: 24rpx;
						margin: 10rpx 0;
						color: #a1a1a1;
						height: 100rpx;
					}
					.item-c {
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left {
							font-size: 24rpx;
							color: #dd524f;
							text {
								font-size: 30rpx;
							}
						}
						.right {
							font-size: 24rpx;
							color: #a1a1a1;
						}
					}
				}
			}
		}
</style>
